<template>
  <div id="log">
    <div class="login_container">

      <div class="login_box">
        <span style="color: #758EF5;font-size: 30px;margin-left: 20px;">QDQ问卷后台管理系统</span>
        <!-- 登录区域     -->
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" class="login_form">
          <!-- 用户名 -->
          <el-form-item prop="username">
            <el-input prefix-icon="el-icon-user" placeholder="请输入您的用户名" v-model="loginForm.username"></el-input>
          </el-form-item>
          <!-- 密码   -->
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="loginForm.password"
                      type="password"></el-input>
          </el-form-item>
          <!--  按钮  -->
          <el-form-item class="btn">
            <el-button type="primary" @click="login">登录</el-button>
            <el-button type="info" @click="resetLoginForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>

</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      // 这是登录表单的数据绑定对象
      loginForm: {
        username: '',
        password: ''

      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          {required: true, message: '请输入登录名称', trigger: 'blur'},
          {min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur'}
        ],
        // 验证密码是否合法
        password: [
          {required: true, message: '请输入登录密码', trigger: 'blur'},
          {min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    // 点击重置按钮，重置登录表单
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields()
    },
    login() {
      //判断数据是否满足格式，才可以提交
      var this_ = this;
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) {//不满足格式
          return
        }
        //向后台调用数据，得到一个返回的对象
        axios.post("admin/login", this.loginForm).then(resp => {
          if (resp.flag) {
            //跳转首页
            //ret.data.data.token对象的，可以用来进行验证的
            this_.$message.success("登录成功")
            console.log(resp.data.token)
            //将token保存到SessionStorage
            window.sessionStorage.setItem('token', resp.data.token)
            this_.$router.push("/homePage")
          } else {
            this_.$message.error("登录失败")
          }
        })
      })
    }
  }
}
</script>

<style>
html,
body,
#log {
  height: 700px;
  margin: 0;
  padding: 0;
  min-width: 1366px;
}

.login_container {
  background-color: #2b5e6b;
  background-image: url("https://th.bing.com/th/id/R7808af2a4cf591fd2f04a7c0036a069c?rik=y2tlZrVj7mzFKQ&riu=http%3a%2f%2fup.deskcity.org%2fpic_source%2f78%2f08%2faf%2f7808af2a4cf591fd2f04a7c0036a069c.jpg&ehk=TkvhgCfHJAL59%2bexKiTDy9iNJXm18qftYs98%2fLGJykA%3d&risl=&pid=ImgRaw");
  background-size: cover;
  height: 100%;
}

.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 34%;
  top: 30%;
}

.login_box .logo_box {
  height: 130px;
  width: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}

.login_box .register_link {
  width: 130px;
  font-size: smaller;
  position: absolute;
  top: 75%;
  right: 65%;
}

.login_box .logo_box img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #eee;
}

.login_form {
  position: absolute;
  top: 100px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.btn {
  display: flex;
  justify-content: flex-end;
}
</style>
